<template>
    <ul class="timeline-wrapper">
        <li class="timeline-item" v-for="t in timelineList" :key="t.id">
            <div class="timeline-box">
                <div class="out-circle">
                    <div class="in-circle"></div>
                </div>
                <div class="long-line"></div>
            </div>
            <div class="timeline-content">
                <div class="timeline-date"><span>{{ t.addTime ? t.addTime.split(" ")[0] : '--' }}</span></div>
                <div class="timeline-title">
                    <el-input
                        type="textarea"
                        readonly
                        resize='none'
                        :autosize="{ minRows: 2, maxRows: 100}"
                        placeholder="请输入内容"
                        v-model="t.details">
                    </el-input></div>
                <!--  -->
                <div class="timeline-desc">创建人：{{ getNickName(t.createBy) }}<i class="el-icon-edit-outline"
                        @click="handlerEdit(t)"></i><i class="el-icon-delete" @click="handlerDel(t)"></i></div>
            </div>
        </li>
    </ul>

</template>

<script type="text/babel">
import { getAllUser } from "@/api/staging/know";
import Vue from 'vue'
export default Vue.component('Timeline', {
    dicts: ['project_progress_state'],
    name: "Timeline",
    props: {
        timelineList: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {
            userList: []
        }
    },
    computed: {
        getNickName() {
            return function (id) {
                return (
                    this.userList && this.userList.length && this.userList.filter(user => user.userName == id)[0]?.nickName
                )
            }
        }
    },
    watch: {
        timelineList: {
            handler(val) {
                this.timelineList = val
            },
            deep: true
        }
    },
    methods: {
        // 删除
        handlerDel(t) {
            this.$emit('del', t)
        },
        // 编辑
        handlerEdit(t) {
            this.$emit('edit', t)
        },
        // 获取人员列表
        getUserList() {
            getAllUser().then(response => {
                this.userList = response.data;
            });
        },
    },
    mounted() {
        this.getUserList()
    }
})
</script>

<style scoped lang="scss">
ul.timeline-wrapper {
    list-style: none;
    margin: 0;
    padding: 0;
}

.el-icon-edit-outline,
.el-icon-delete {
    margin-left: 15px;
    font-size: 16px;
    color: #0e74da;
    cursor: pointer;
}

/* 时间线 */
.timeline-item {
    position: relative;
    height: 100%;
    .timeline-box {
        text-align: center;
        position: absolute;
        height: 100%;
        .out-circle {
            width: 16px;
            height: 16px;
            background: rgba(14, 116, 218, 0.1);
            box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
            /*opacity: 0.1;*/
            border-radius: 50%;
            display: flex;
            align-items: center;

            .in-circle {
                width: 8px;
                height: 8px;
                margin: 0 auto;
                background: rgba(14, 116, 218, 1);
                border-radius: 50%;
                box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
            }
        }

        .long-line {
            width: 2px;
            height: 100%;
            background: rgba(14, 116, 218, 1);
            box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
            opacity: 0.1;
            margin-left: 8px;
        }
    }

    .timeline-content {
        box-sizing: border-box;
        margin-left: 20px;
        height: 100%;
        padding: 0 0 0 20px;
        text-align: left;
        margin-bottom: 30px;

        .timeline-title {
            font-size: 14px;
            word-break: break-all;
            margin-bottom: 16px;
            color: #333;
            font-weight: 500;
            /*display: inline;*/
            ::v-deep .el-textarea__inner {
                border: none;
                padding: 0;
            }
        }

        .timeline-date {
            font-size: 16px;
            color: #333;
            font-weight: 500;
            margin-bottom: 16px;
        }

        .timeline-desc {
            font-size: 14px;
            color: #999999;
        }
    }

}


.timeline-item:last-of-type .timeline-content {
    margin-bottom: 0;
}
</style>